sakai-user-photo > div:first-child {
  float: left;
  position: relative;
  background-position: 50%;
  background-size: auto 100%;
  border-radius: 50%;

  &.large {
    min-width: 300px;
    max-width: 300px;
    height: 300px;
  }

  &.medium {
    min-width: 200px;
    max-width: 200px;
    height: 200px;
  }

  &.small {
    min-width: 100px;
    max-width: 100px;
    height: 100px;
  }

  &.largest-thumbnail {
    min-width: 34px;
    max-width: 34px;
    height: 34px;
  }

  &.large-thumbnail {
    min-width: 30px;
    max-width: 30px;
    height: 30px;
  }

  &.medium-thumbnail {
    min-width: 26px;
    max-width: 26px;
    height: 26px;
  }

  &.small-thumbnail {
    min-width: 22px;
    max-width: 22px;
    height: 22px;
  }

  &.smaller-thumbnail {
    min-width: 18px;
    max-width: 18px;
    height: 18px;
  }

  span {
    background-color: var(--sakai-user-status-online);
    height: 12px;
    width: 12px;
    position: absolute;
    bottom: -2px;
    border-radius: 6px;
    right: -2px;
  }
}


